<template>
    <div class="login-container">
      <div class="login">
          <div class="logo">
            <i18n class="i18n" v-if="!loading"
                  @changeLang="changeLang"
            >
            </i18n>
               <a href="javascript:;" target="_blank"><img src="./login-gzdx.png" height="100" width="200"></a>
          </div>
          <div class="login-box">
            <login-index :isOem="true"></login-index>
          </div>
          <div class="footer">&copy;2016中国电信 </div>
        <!-- 浏览器推荐 -->
          <browser></browser>
          <!-- <v-editor></v-editor> -->
      </div>
    </div>
</template>

<script>
import I18n from '../../I18nSelect'
import eleLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import eleLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import eleLocaleEn from 'element-ui/lib/locale/lang/en'
import Vue from 'vue'
import Browser from '../../Browser'
// import Email from './Email'
// import Phone from './Phone'
import LoginIndex from '../../login.vue'
// import IdentifyCode from './IdentifyCode'
// import Editor from '../../ui-modules/editor/Editor'
export default {
  name: 'login-gzdx',
  components: {
    LoginIndex,
    Browser,
    I18n
  },
  data () {
    return {
      loading: true,
      count: 0
    }
  },
  computed: {
  },
  methods: {
    fetchData (lang, count = 0) {
      let langTemp = ''
      if (!lang) {
        this.loading = false
        return null
      } else {
        langTemp = lang
      }
      let url = window.location.origin + '/static/i18n/locales/' + langTemp + '.json'
      let urlConfig = window.location.origin + '/static/i18n/locales/' + langTemp + '_Config.json'
      Promise.all([
          window.fetch(url + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        }),
        window.fetch(urlConfig + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      ]).then(([response1, response2]) => {
        Promise.all([response1.json(), response2.json()])
        .then(([res1, res2]) => {
            let locales = ''
            switch (langTemp) {
              case 'zh_CN':
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'zh_TW':
                locales = {...res1, ...res2, ...eleLocaleZhTW}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'en':
                locales = {...res1, ...res2, ...eleLocaleEn}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
              default:
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
            }
            document.title = `${locales.routeI18n.login} - ${locales.login.cloudService}`
            this.$router.afterEach((route) => {
              let title = route.meta.title || ''
              document.title = `${locales.routeI18n[title]} - ${locales.login.cloudService}`
            })
            Vue.set(Vue.config, 'lang', langTemp || 'zh_CN')
            this.$i18n.setLocaleMessage(lang || 'zh_CN', locales)
            this.$i18n.locale = lang
            window.langJson = {...res1, ...res2} || {}
            this.loading = false
          }).catch(() => {
          if (this.count < 3) {
            this.fetchData(lang, this.count++)
          } else {
            window.alert('Network anomaly！！！ Please check your network')
          }
        })
      })
    },
    changeLang (lang) {
      this.fetchData(lang)
    }
  },
  beforeMount () {
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
    @import "../../styl/_login"
    @import "../../../../../assets/common.styl"
    .login-container
      height 100vh
      display flex
      justify-content center
      align-items center
      -webkit-user-select none
      background linear-gradient(#00a3c9, #006da8) no-repeat
    h1
    h2
      font-weight normal
    a
      color  $c-main
    .login
      font-size 12px
      width 100%
      .logo
        display flex
        width 100%
        padding 20px 0 70px
        height 80px
        margin-top 0px
        justify-content center
        align-items center
        flex-direction column
        background-size 100%
        background-position 50% 100%
        p
          font-size 20px
          color $cf-white
          .point
            margin 5px 10px
            display inline-block
            box-size(10px,10px)
            background $cf-white
            border-radius 5px
    .login-box
        position relative
        display flex
        justify-content center
        width 100%
    .vertical-line
        position absolute
        display inline-block
        height 295px
        width 1px
        top 0px
        left 463px
        background-color $cf-white

    .login-tip-size
        height 14px
        .active
            display block
    .QR-code-info
        color #a6c5da
        line-height 24px
        margin-top 90px

    .p-news
        margin-bottom 16px
        li a
            display block
            @extend .common-ellipsis
            width 352px
            line-height 28px

    .login-extentype ul
        li
            box-size(100px,100px)
            border-radius 50px
            padding 8px
            box-sizing border-box
            display inline-block
            span
                display inline-block
                border 1px solid $color-theme
                box-size(82px,82px)
                border-radius 41px
                text-align center
                line-height 103px
                box-sizing border-box
                img
                    opacity .5

            input
                box-size(82px,82px)
                position absolute
                z-index 3
                opacity 0

            input:hover
                cursor pointer
            .login-tip
              position absolute
              top -61px
              left 0
              opacity 0
              h4
                color $cf-white
                line-height 28px
              p
                color #a6c5da
                width 70%
        li.active
            border 1px solid $color-green
            cursor pointer
            span
                border 1px solid $color-green
                background $color-green
                img
                    opacity 1

        li:hover
          .login-tip
            width 800px
            opacity 1
            top -61px
            left 0
          .login-tip__movedown
            top -61px
    .footer
       padding-top 20px
       text-align center
       color white
    .i18n
      position absolute
      top 20px
      right 20px
      width 110px
</style>
